我們在講Property animation有講過keyFrame,這裡也可以使用keyFrameSet。
KeyFrameSet 裡可以設定
KeyPosition 位置的變化
KeyCycle 振盪效果
KeyAttribute 屬性的變化
KeyPosition
設定動畫在50%時,Y的位置往上移動25%
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000">
<OnSwipe
motion:touchAnchorId="@+id/button"
motion:touchAnchorSide="right"
motion:dragDirection="dragRight"/>
<KeyFrameSet>
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="-0.25"
motion:framePosition="50"
motion:target="@id/button"/>
</KeyFrameSet>
</Transition>
再加3個keyPosition
<KeyFrameSet>
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="-0.25"
motion:framePosition="25"
motion:target="@id/button"/>
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="0.25"
motion:framePosition="50"
motion:target="@id/button"/>
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="-0.25"
motion:framePosition="75"
motion:target="@id/button"/>
</KeyFrameSet>
加上KeyCycle 產生振盪
<KeyFrameSet>
<KeyCycle
android:rotation="25"
motion:framePosition="50"
motion:target="@+id/button"
motion:wavePeriod="1"
motion:waveShape="sin" />
</KeyFrameSet>
KeyCycle加上KeyAttribute放大2倍
<KeyFrameSet>
<KeyCycle
android:rotation="25"
motion:framePosition="25"
motion:target="@+id/button"
motion:wavePeriod="1"
motion:waveShape="sin" />
<KeyAttribute
motion:target="@id/button"
android:scaleX="2"
android:scaleY="2"
motion:framePosition="50" />
</KeyFrameSet>
KeyAttribute 支援的屬性
android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ
MotionLayout 仍有非常多可以應用的。可以看看Google的範例:https://github.com/googlesamples/android-ConstraintLayoutExamples
裡面有MotionLayout結合CoordinatorLayout、viewPager、reveal、fragment等的應用。